<template>
  <div>
    <div class="main_header">
      <div style="display: flex">
        <div style="margin-left: 30px; font-size: 1.275rem">
          试卷名：{{ TestRecords.testPaperName }}
        </div>
        <div style="margin-left: 30px; font-size: 1.275rem">
          得分：<span style="color: red">{{ TestRecords.userScore }}分</span>
        </div>
      </div>
      <div
        style="margin-left: 30px; font-size: 1.275rem; margin-right: 1.875rem"
      >
        <el-button
          type="primary"
          round
          style="background-color: #03d3bd; border: none"
          >返回</el-button
        >
      </div>
    </div>
    <div class="exam">
      <div class="title" style="position: relative">
        <div>
          <p style="font-size: 1.1875rem">答题卡</p>
        </div>
        <div>
          <span
            v-for="(item, idx) in questions"
            :key="idx"
            @click="pages(idx)"
            style="margin-top: 10px"
            :class="{ noactive: item.result == 0, deactive: item.result == 1 }"
            >{{ idx + 1 }}</span
          >
        </div>
        <div
          class="Bottom"
          style="text-align: center; display: flex; align-items: center"
        >
          <span
            class="deactive"
            style="height: 1.875rem; width: 1.875rem; margin-left: 1.25rem"
          ></span>
          正确
          <span
            class="noactive"
            style="height: 1.875rem; width: 1.875rem; margin-left: 1.25rem"
          ></span>
          错误
          <!-- <span style="width: 30px;height: 30px;margin-left: 0.625rem;background-color: #ffaa00;"></span>
					收藏 -->
        </div>
      </div>
      <div class="topic">
        <div class="topic_main">
          <div>题目</div>
          <!-- <div>共{{questions.length}}题</div> -->
        </div>

        <div class="question" v-for="(item, idx) in questions" :key="idx">
          <div>{{ `${idx + 1}.[${item.question.name}]` }}</div>
          <div style="display: flex">
            <div v-html="`${md(item.question.content)}`"></div>
          </div>
          <div>
            <!-- <el-radio-group  v-if="item.question.topicId==1">
						<el-radio :label="Ite.id"   v-for="(Ite,index) in item.question.optionsList" :key="index"></el-radio>
						
					</el-radio-group> -->
            <div
              v-for="(Ite, index) in item.question.optionsList"
              :key="index"
              style="margin-left: 1.25rem; margin-top: 20px; display: flex"
            >
              {{ letter[index] }}:
              <div v-html="`${md(Ite.content)}`"></div>
            </div>
            <!-- <el-checkbox-group  style="display: flex;flex-direction: column;" v-if="item.question.topicId==2">
					    <el-checkbox :label="Ite.id"   v-for="(Ite,index) in item.question.optionsList" style="margin-top: 1.25rem;" >{{Ite.id}}.{{ Ite.content }}</el-checkbox>
					 </el-checkbox-group> -->
          </div>
          <ul style="background-color: #f9f9f9; margin-top: 10px">
            <li style="display: flex; justify-content: space-between">
              <div>
                结果：<span :class="item.result ? 'yes' : 'no'">{{
                  item.result ? "正确" : "错误"
                }}</span>
              </div>
            </li>
            <div v-if="item.question.name == '单选题'||item.question.name == '多选题'">
              <li>标答:{{ Anwer[idx].answer }}</li>
              <li>我的答案:{{ Anwer[idx].userAnswer }}</li>
            </div>
            <div v-if="item.question.name == '判断题'">
              <li>标答:{{ item.question.answer == 1 ? "正确" : "错误" }}</li>
              <li>我的答案:{{ item.userAnswer == 1 ? "正确" : "错误" }}</li>
            </div>
			 <div v-if="item.question.name == '填空题'||item.question.name == '简单题'">
              <li>标答:{{ item.question.answer }}</li>
              <li>我的答案:{{item.userAnswer }}</li>
            </div>

            <li>得分：{{ item.result == 1 ? item.question.score : 0 }}</li>
            <li>
              难度：<el-rate
                v-model="item.question.difficulty"
                :max="5"
                :texts="texts"
                show-text
                disabled="disabled"
              >
              </el-rate>
            </li>
            <!-- <li>解析：{{item.question.parsing }}</li> -->
          </ul>
        </div>
      </div>
      <div class="left">
        <div>考试时间</div>
        <div style="color: red; margin-bottom: 2.5rem">
          {{ TestRecords.spendTime }}
        </div>
        <hr style="margin-top: 10px" color="#ececec" size="1" />
        <!-- <div>筛选试题</div>
				<el-dropdown style="width: 100%;">
					<span class="el-dropdown-link">
						全部<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown" style="width: 6%;">
						<el-dropdown-item>答对</el-dropdown-item>
						<el-dropdown-item>答错</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown> -->
      </div>
    </div>
  </div>
</template>

<script>
import { TestManager } from "../../request/test.js";
import marked from "marked";
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  data() {
    return {
      texts: ["一星", "二星", "三星", "四星", "五星"],
      js: "",
      star: false,
      isShow: true,
      page: 1,
      exam: {
        num: [],
      },
      questions: [],
      TestRecords: [],
      checkedCities: ["上海", "北京"],
      cities: cityOptions,
      letter: ["A", "B", "C", "D", "E", "F", "G", "H", "R", "J", "K", "L"],
      Anwer: [],
    };
  },
  created() {
    this.getTestRecordsInfo();
  },
  methods: {
    //页面的跳转
    pages(id) {
      document.getElementsByClassName("question")[id].scrollIntoView();
    },
    //获取记录
    getTestRecordsInfo() {
      var parmas = {
        id: localStorage.getItem("test_record"),
      };
      TestManager.getTestRecordsInfo(this.qs.stringify(parmas)).then((e) => {
        console.log(e.data.data);
        this.questions = e.data.data.questions;
        this.TestRecords = e.data.data.testRecord;
        //获取答案
        var map = new Map();
        //存入map
        for (let i = 0; i < this.questions.length; i++) {
          if (
            this.questions[i].question.topicId == 1 ||
            this.questions[i].question.topicId == 2
          ) {
            for (
              let j = 0;
              j < this.questions[i].question.optionsList.length;
              j++
            ) {
              map.set(
                this.questions[i].question.optionsList[j].id,
                this.letter[j]
              );
              console.log(this.letter[j]);
            }
          }
          //获取标准答案
          var ans = this.questions[i].question.answer.split(",");
          var an = [];
          for (let i = 0; i < ans.length; i++) {
            console.log(ans[i]);
            console.log(map.get(parseInt(ans[i])));
            an.push(map.get(parseInt(ans[i])));
          }
          var answer = an.join(",");
          //获取用户答案
          var ans1 = this.questions[i].userAnswer.split(",");
          var an1 = [];
          for (let i = 0; i < ans1.length; i++) {
            console.log(ans1[i]);
            console.log(map.get(parseInt(ans1[i])));
            an1.push(map.get(parseInt(ans1[i])));
          }
          var userAnswer = an1.join(",");
          var p = { answer: answer, userAnswer: userAnswer };
          this.Anwer.push(p);
        }
        console.log(this.Anwer);
      });
    },
    md(content) {
      return marked(content);
    },
  },
};
</script>

<style scoped>
.topic_main {
  display: flex;
  justify-content: space-between;
}

.main_header {
  height: 5.5rem;
  margin-left: 2.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
}

.exam {
  width: 100vw;
  height: 100vh;
  background-color: #eff3f7;
  display: flex;
  justify-content: center;
}

.exam .title,
.exam .left {
  margin: 50px 20px;
  height: 80%;
  background-color: #fff;
}
.exam .left {
  height: 30%;
}

.exam .topic {
  margin-top: 3.125rem;
  height: 80%;
  background-color: #fff;
}

.title {
  width: 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.title div {
  width: 100%;
  /* height: 40px; */
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 20px;
  padding-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
}

.title div:nth-child(2) {
  display: flex;
  height: 100px;
  flex-wrap: wrap;
}
/* .title div:nth-child(2) span{
		width: 6.25rem;
	} */

.title div p {
  display: block;
}

/* .title div>span {
		
	} */

.noactive {
  display: block;
  background-color: #ffaa00;
  color: #ffffff;
  width: 40px;
  height: 30px;
  margin-right: 10px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}
.deactive {
  background-color: #03d3bd;
  margin-top: 10px;
  display: block;
  /* background-color: #ffaa00; */
  color: #ffffff;
  width: 40px;
  height: 30px;
  margin-right: 10px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  cursor: pointer;
}

.exam .topic {
  overflow: scroll;
  scrollbar-width: none;
}

.exam .topic::-webkit-scrollbar {
  width: 0;
}

.title {
  width: 15%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.topic {
  width: 65%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.topic > span {
  display: block;
  height: 40px;
  line-height: 40px;
  font-weight: 500;
  font-size: 25px;
}

.topic .question {
  flex: 5;
  display: flex;
  flex-direction: column;
  padding: 50px;
  border-bottom: 1px solid #dfdfdf;
}

.topic .question .el-radio-group {
  display: flex;
  flex-direction: column;
}

.el-radio-group .el-radio {
  height: 40px;
  line-height: 40px;
}

.question li {
  list-style: none;
  display: block;
  height: 40px;
  margin-left: 1.875rem;
  display: flex;
  align-items: center;
}

.question span {
  display: inline-block;
  height: 20px;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid #fdf6ec;
}

.question .yes {
  background: #f0f9eb;
  color: #97d3bf;
}

.question .no {
  background-color: #fdf6ec;
  color: #e7ac95;
}

.left {
  margin-top: 3.25rem;
  background-color: #ffffff;
  width: 100px;
  text-align: center;
}

.left div {
  margin-top: 0.875rem;
}

.Bottom {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  display: flex;
}
</style>
